<template>
	<view>
		<view class="r-content" v-if="showInfo">
			<u-line color="#efefef" :customStyle="{ display: 'block' }"></u-line>
			<text class="state">{{ orderCarStatusStr }}</text>

			<view class="item">
				<view
					style="
						display: inline-flex;
						height: 80rpx;
						justify-content: space-between;
						margin: 0 20rpx;
					">
					<u-icon
						name="order"
						color="#1573FF"
						:label="1 == returnCarType ? '换车信息' : '退车信息'"
						label-color="#333333"
						:customStyle="{ 'line-height': '80rpx' }"></u-icon>

					<text style="line-height: 80rpx; color: #e93131"></text>
				</view>

				<u-line color="#efefef" :customStyle="{ display: 'block' }"></u-line>

				<view style="height: 20rpx"></view>

				<view class="text-line">
					<text class="text-name">
						{{ 1 == returnCarType ? '换车退车时间:' : '退车时间:' }}
					</text>
					<text class="text-value">
						{{
							(1 == returnCarType ? model.timeApply : model.carBackTime) | filterNull
						}}
					</text>
				</view>

				<view class="text-line" v-if="2 == returnCarType">
					<text class="text-name">退车类别:</text>
					<text class="text-value">{{ model.carTypeShow | filterNull }}</text>
				</view>

				<view class="text-line">
					<text class="text-name">退车里程数:</text>
					<text class="text-value">{{ model.alterationMileage | filterNull }}</text>
				</view>

				<view class="text-line">
					<text class="text-name">
						{{ 1 == returnCarType ? '换车原因:' : '退车原因:' }}
					</text>
					<text class="text-value">
						{{
							(1 == returnCarType ? model.alterationType : model.alterationDesc)
								| filterNull
						}}
					</text>
				</view>

				<view class="text-line">
					<text class="text-name">车辆退回仓库:</text>
					<text class="text-value">{{ model.depot | filterNull }}</text>
				</view>
				<view class="text-line">
					<text class="text-name">退款时间</text>
					<text class="text-value">{{ model.refundTime | filterNull }}</text>
				</view>

				<view v-for="(val, key, i) in feeItemConfig" :key="key" v-if="!val.hide">
					<view
						style="
							display: inline-flex;
							height: 80rpx;
							justify-content: space-between;
							margin: 0 20rpx;
						">
						<u-icon
							name="order"
							color="#1573FF"
							:label="val.fieldName"
							label-color="#333333"
							:customStyle="{ 'line-height': '80rpx' }"></u-icon>
						<text style="line-height: 80rpx; color: #e93131"></text>
					</view>
					<view class="text-line" v-for="(item, k, index) in val.feeItemConfig" :key="k">
						<text class="text-name">
							{{ item.serviceName }}
							<template v-if="item.serviceName == '车辆租金欠款金额'">
								<view @click="tip" style="padding-left: 5rpx">
									<u-icon size="18" name="info-circle-fill"></u-icon>
								</view>
							</template>
							:
						</text>
						<text class="text-value">
							{{
								feeItemConfig[key]['feeItemConfig'][k].value
									? feeItemConfig[key]['feeItemConfig'][k].value
									: '--'
							}}
						</text>
					</view>
				</view>
				<view class="text-line">
					<text class="text-name">凭证:</text>
					<text class="text-value" v-if="model.uploadAttach.length <= 0">--</text>
				</view>
				<picPdf
					v-if="model.uploadAttach && model.uploadAttach.length > 0"
					:attachment="model.uploadAttach"></picPdf>

				<view class="bottom-text">
					<text style="color: #e93131; font-size: 28rpx">
						{{ newAmount < 0 ? '退还金额:' : '补缴金额:' }}
					</text>
					<text style="color: #333333; font-size: 32rpx">
						￥{{ Math.abs(newAmount) }}
					</text>
				</view>
			</view>
		</view>
    <no-data v-else></no-data>
		<u-modal :show="show" :closeOnClickOverlay="true" @confirm="closeTip" @close="closeTip">
			<view class="slot-content">
				<view>根据公司所设定的退租规则来计算退车租金，退车租金结算方式：</view>
				<div>1、按实际使用天数计算</div>
				<div>2、按原周期账单方式结算</div>
			</view>
		</u-modal>

	</view>
</template>

<script>
	import picPdf from '@/components/pic-pdf.vue';

	export default {
		components: { picPdf },
		data() {
			return {
				orderCarNo: '',
				returnCarType: '',
				rentType: '',
				orderCarStatusStr: '',
				model: {
					uploadAttach: [],
				},
				feeItemConfig: {},
				newAmount: 0,
				show: false,
			};
		},
		mounted() {
			let that = this;
			that.$nextTick(function () {
				setTimeout(() => {
					for (var key in that.feeItemConfig) {
						for (var k in that.feeItemConfig[key].feeItemConfig) {
							if (
								that.feeItemConfig[key].feeItemConfig[k].serviceProperty === 1 ||
								that.feeItemConfig[key].feeItemConfig[k].serviceProperty === 2
							) {
								that.$refs[k][0].setFormatter(e => {
									return e
										.replace(/[^\d.]/g, '')
										.replace(/\.{2,}/g, '.')
										.replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
								});
							}
						}
					}
				}, 1500);
			});
		},
		methods: {
			closeTip() {
				this.show = false;
			},
			tip() {
				this.show = true;
			},
			// 动态字段失去焦点变化
			inputBlur() {
				let that = this;
				let num = 0;
				for (var key in that.feeItemConfig) {
					for (var k in that.feeItemConfig[key].feeItemConfig) {
						if (that.feeItemConfig[key].feeItemConfig[k].serviceProperty === 1) {
							// num -= Number(that.feeItemConfig[key].feeItemConfig[k].value || 0)
							num = Number(num).sub(
								Number(that.feeItemConfig[key].feeItemConfig[k].value || 0),
							);
						} else if (that.feeItemConfig[key].feeItemConfig[k].serviceProperty === 2) {
							// num += Number(that.feeItemConfig[key].feeItemConfig[k].value || 0)
							num = Number(num).add(
								Number(that.feeItemConfig[key].feeItemConfig[k].value || 0),
							);
						} else {
						}
					}
				}
				that.newAmount = num;
			},
		},
		computed: {
			showInfo() {
				return !uni.$u.test.isEmpty(this.model);
			},
		},
		onLoad(op) {
			this.orderCarNo = 'null' != op.orderCarNo ? op.orderCarNo : '';
			this.returnCarType = 'null' != op.returnCarType ? op.returnCarType : '';
			this.orderCarId = 'null' != op.orderCarId ? op.orderCarId : '';
			this.instanceId = op.instanceId ? op.instanceId : 'getInstanceId';
			this.rentType = 'null' != op.rentType ? op.rentType : '';
			// this.orderCarStatusStr = 'null'!=op.orderCarStatusStr?op.orderCarStatusStr:''

			if (1 == this.returnCarType) {
				uni.setNavigationBarTitle({
					title: '换车信息',
				});
			} else if (2 == this.returnCarType) {
				uni.setNavigationBarTitle({
					title: '退车信息',
				});
			}
			this.$u.api
				.applyfeeDetail({
					orderCarId: this.orderCarId,
					instanceId: '',
					suitType: this.returnCarType === '1' ? '2' : '1',
				})
				.then(res => {
					this.feeItemConfig = res;
					this.inputBlur();
				});
			this.$u.api
				.applyforQueryInfo({
					orderCarNo: op.orderCarNo,
					alterationType: op.returnCarType,
				})
				.then(res => {
					this.model = res;

					this.orderCarStatusStr = this.model.orderCarStatusStr;
				});
		},
	};
</script>

<style lang="scss" scoped>
	.r-content {
		display: flex;
		flex-direction: column;
	}

	.state {
		width: 100%;
		line-height: 118rpx;
		text-align: center;
		font-size: 45rpx;
		color: #ffc000;
		font-weight: bold;
		background-color: #fff;
	}

	.bottom-text {
		display: flex;
		align-items: flex-end;
		height: 50rpx;
		margin-right: 20rpx;
		justify-content: flex-end;
	}
</style>
